<template>
	<view>
		<view class="flex" style="padding: 11px 15px; background-color: #fff; justify-content: space-between">
			<view style="font-size: 16px; color: #1d1f20; font-weight: bold">下级代理：{{ tit }}的结算抽成统计</view>
			<!-- <view
				style="padding: 5px 20px;background-color: #FF3331;border-radius: 15px;font-size: 14px;font-size: 14px;font-weight: 400;color: #fff;">
				交单记录</view> -->
		</view>
		<view class="flex" style="padding: 11px 15px; justify-content: space-between">
			<view style="font-size: 16px; font-weight: bold; color: #1d1f20">结算抽成明细</view>
			<view>
				<uni-datetime-picker @change="change" v-model="range" type="daterange" returnType="timestamp">
					<view class="flex" style="padding: 5px 15px; background-color: #fff; border-radius: 15px">
						<view style="font-size: 14px; color: #777979">到账日期：{{ dzrq }}</view>
						<image style="width: 12px; margin-left: 10px" src="/static/img/19.png" mode="widthFix"></image>
					</view>
				</uni-datetime-picker>
			</view>
		</view>
		<view style="padding: 0px 15px">
			<view
				v-for="(it, i) in tablist"
				:key="i"
				style="background-color: #fff; padding: 15px; margin-bottom: 15px; border-radius: 10px"
			>
				<view class="flex">
					<image
						style="width: 42px; height: 42px; margin-right: 10px; border-radius: 10px"
						:src="imgurl + it.project.logo_image"
						mode=""
					></image>
					<view>
						<view style="font-size: 14px; font-weight: bold; color: #1d1f20">{{ it.project.title }}</view>
						<view style="margin-top: 5px; font-size: 12px; color: #1d1f20; font-weight: 400; color: #808282">
							作业时间：{{ it.work_time }}
						</view>
					</view>
				</view>
				<view style="margin-top: 15px; padding: 15px 11px; background-color: #f7f9fa; border-radius: 5px">
					<view class="flex w_lists" style="" v-for="(its, is) in tit_arr" :key="is">
						<view :class="`opt` + is" style="width: 33%; text-align: center; color: #1d1f20; font-size: 14px">
							{{ its.name }}
						</view>
						<view
							:class="`opts` + is"
							style="width: 33%; text-align: center; font-size: 14px; color: #ff3331"
							v-for="(item, index) in its.arr"
							:key="index"
						>
							{{ item.name }}
						</view>
					</view>
					<view class="flex w_lists" style="" v-for="(itema, indexa) in it.gl" :key="itema.id">
						<view :class="`opt0`" style="width: 33%; text-align: center; color: #1d1f20; font-size: 14px">
							{{ itema.name }}
						</view>
						<view :class="`opt4`" style="width: 33%; text-align: center; color: #1d1f20; font-size: 14px">
							{{ itema.sett == null ? 0 : itema.sett.num }}
						</view>
						<view :class="`opt4`" style="width: 33%; text-align: center; color: #1d1f20; font-size: 14px">
							￥{{ itema.sett == null ? 0 : itema.sett.sum }}
						</view>
					</view>
					<view class="flex w_lists" style="">
						<view :class="`opt4`" style="width: 33%; text-align: center; color: #1d1f20; font-size: 14px">
							合计金额
						</view>
						<view :class="`opt4`" style="width: 33%; text-align: center; color: #1d1f20; font-size: 14px">
							{{ it.henum }}
						</view>
						<view :class="`opt4`" style="width: 33%; text-align: center; color: #1d1f20; font-size: 14px">
							￥{{ it.hesum }}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import config from '../../common/config/index.js';
	export default {
		data() {
			return {
				tit: '业务员',
				range: [],
				tit_arr: [
					{
						name: '结算标准',
						arr: [
							{
								name: '结算数量',
							},
							{
								name: '抽成补贴',
							},
						],
					},
				],
				sub_id: '',
				tablist: [],
				stime: '',
				etime: '',
				time: '',
				dzrq: '',
				imgurl: config.imgurl,
			};
		},
		onShow() {
			uni.$on('update', this.times);
		},
		onLoad(e) {
			this.time = e.time;
			this.stime = e.stime;
			this.etime = e.etime;
			if (this.time != '') {
				let date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				date.setMonth(month);
				date.setDate('1');
				// 获取本月最后一天
				let dd = date.setDate(date.getDate() - 1);
				let els = uni.$u.timeFormat(dd, 'yyyy-mm-dd');
				if (this.time == 'today') {
					this.dzrq = uni.$u.timeFormat('', 'yyyy-mm-dd');
				} else if (this.time == 'yesterday') {
					this.dzrq = year + '-' + month + '-' + day + '至' + month + '-' + (day - 1);
				} else {
					this.dzrq = year + '-' + month + '-' + '01' + '至' + els.substr(5, 5);
				}
			} else {
				if (this.stime == '') {
					this.dzrq = uni.$u.timeFormat('', 'yyyy-mm-dd');
				} else {
					this.dzrq =
						uni.$u.timeFormat(this.stime, 'yyyy-mm-dd') +
						'至' +
						uni.$u.timeFormat(this.etime, 'yyyy-mm-dd').substr(5, 6);
				}
			}

			this.tit = e.name;
			this.sub_id = e.sub_id;
			this.tab_list();
		},
		methods: {
			times(e) {
				this.stime = '';
				this.etime = '';
				let that = this;
				let date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				date.setMonth(month);
				date.setDate('1');
				// 获取本月最后一天
				let dd = date.setDate(date.getDate() - 1);
				let els = uni.$u.timeFormat(dd, 'yyyy-mm-dd');
				if (e.msg.name == '今日') {
					that.time = 'today';
					this.dzrq = uni.$u.timeFormat('', 'yyyy-mm-dd');
				} else if (e.msg.name == '昨日') {
					that.time = 'yesterday';
					this.dzrq = year + '-' + month + '-' + day + '至' + month + '-' + (day - 1);
				} else {
					that.time = 'month';
					this.dzrq = year + '-' + month + '-' + '01' + '至' + els.substr(5, 5);
				}

				that.tab_list();
			},
			async tab_list() {
				let res = await this.$http.index.subCommissionReport({
					sub_user_id: this.sub_id,
					stime: this.stime,
					etime: this.etime,
					time: this.time,
				});
				if (res.code == 1) {
					this.tablist = res.data.list;
				}
			},
			change(e) {
				this.time = '';
				this.stime = e[0] / 1000;
				this.etime = e[1] / 1000;
				this.dzrq =
					uni.$u.timeFormat(this.stime, 'yyyy-mm-dd') + '至' + uni.$u.timeFormat(this.etime, 'yyyy-mm-dd').substr(5, 6);
				this.tab_list();
			},
		},
	};
</script>
<style>
	page {
		background-color: #f7f9fa;
	}
</style>
<style scoped lang="scss">
	.w_lists {
		margin-bottom: 10px;

		&:last-child {
			margin-bottom: 0px;
		}
	}

	.opt0 {
		color: #7a7d7d !important;
	}

	.opt4 {
		color: #ff3331 !important;
	}

	.opts0 {
		color: #7a7d7d !important;
	}
</style>
